<template>
    <div class="result-board">
        <div class="result-board-text" v-if="$store.state.pk.loser == 'all'">
            Draw
        </div>
        <div class="result-board-text" v-else-if="$store.state.pk.loser === 'A' && $store.state.pk.a_id === parseInt($store.state.user.id)">
            Lose
        </div>
        <div class="result-board-text" v-else-if="$store.state.pk.loser === 'B' && $store.state.pk.b_id === parseInt($store.state.user.id)">
            Lose
        </div>

        <div class="result-board-text" v-else>
            win
        </div>
        <div class="result-board-btn">
        <button @click="restart" type="button" class="btn btn-warning btn-lg">
            再来！
        </button>
        </div>
    </div>
</template>

<script>
// === 比较类型 == 变量类型不一样 -自动变成字符串
import {useStore} from 'vuex';
export default{
    setup(){
        const store = useStore();
        const restart = () =>{
            store.commit("updateStatus","matching");
            store.commit("updateLoser", "none");
                        store.commit("updateOpponent",{
                username: "我的对手",
                photo: "https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png"
            })
        }
        return {
            restart
        };
    }
}
</script>

<style scoped>

    div.result-board{
        height: 30vh;
        width: 30vw;
        position: absolute;
        top: 30vh;
        left: 35vw;
        background-color: rgba(50, 50, 50, 0.5);
         /* 绝对定位的居中 */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    div.result-board-text{
        text-align: center;
        color: white;
        font-size: 50px;
        font-weight: 600;
        font-style: italic;
        padding-top: 5vh;
    }
    div.result-board-btn{
        padding-top: 7vh;
        text-align: center;
    }
</style>
